<script lang="ts" setup>
    import MobileNav from '@/components/mobile-ai/components/mobile-nav.vue'
    import { useRouter } from 'vue-router'

    const router = useRouter()
    const radio = ref('报修漏水问题');
    const character = ref('正常');
    function onClickStart(){
        router.push({ path: '/aicustomer', query: { request: radio.value,character:character.value,sessionType:20} })
    }
</script>
<!-- 客服训练页面 -->
<template>
    <section  class="w-full ">
        <MobileNav :navname="'客服训练'"  />
        <div class="w-full h-full pt-20  px-3.5">
            <div class=" w-full center-box rounded m-auto p-5">
                <div class="head-title text-2xl text-center pb-6 font-light">训练的要求</div>
                <div class="dashed px-8"></div>
                <div class="user-demand flex pt-2.5  items-baseline  justify-center m-auto">
                    <div class=" text-color">用户的需求 :</div>
                    <div class="ml-4 tran-list">
                        <el-radio-group v-model="radio">
                            <el-radio :value="'报修漏水问题'">报修漏水问题</el-radio>
                            <el-radio :value="'报修水质问题'">报修水质问题</el-radio>
                            <el-radio :value="'投诉维修人员的服务态度差'">投诉维修人员的服务态度差</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div class="user-demand flex pt-4.5  items-baseline justify-center m-auto ">
                    <div class=" text-color">用户个性特征 :</div>
                    <div class="ml-4 tran-list">
                        <el-radio-group v-model="character">
                            <el-radio :value="'性格温和，说话很友好'">性格温和，说话很友好</el-radio>
                            <el-radio :value="'正常'">正常</el-radio>
                            <el-radio :value="'性格暴躁、挑剔、说话很不客气'">性格暴躁、挑剔、说话很不客气</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div class="flex justify-center items-center pt-8 pb-4">
                    <el-button type="primary" size="large" class="w-47" @click="onClickStart()">开始训练</el-button>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
    .center-box{
        background-color: #fff;
        box-shadow:0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
    }
    .head-title{
        color: #409EFF;
    }
    .dashed{
        border-top: 1px solid #dcdfe6;
    }
    .text-color{
        color: #999;
        text-align: right;
        width: 6rem;
        white-space: nowrap;
    }
    .center-box /deep/ .el-radio-group{
        flex-direction: column;
        align-items: baseline
    }
    .tran-list{
        width: 15rem;
    }
</style>